<style scoped lang="scss">
  .back-content {
    margin-top: 20px;
    .el-row {
      margin-top: 25px;
    }
    .el-tag {
      margin-right: 10px;
    }
  }

  .container {
    padding: 10px 15px
  }
</style>
<template>
  <div v-loading="loading">
    <div class="container">
      <el-form label-position='top' :model="form">
        <el-form-item label="语句输入" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="10"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" plain="" @click.stop.prevent="save()">分析</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="back-content container">
      <h3>分析结果</h3>
      <div v-if="content.entities&&content.entities.length>0">
        <el-row :gutter="10">
          <el-col :span="1">实体</el-col>
          <el-col :span="20">
            <el-tag v-for="(entity,index) in content.entities" size="mini" :key="index" type="primary">{{entity}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="content.links.length>0">
          <el-col :span="1">关系</el-col>
          <el-col :span="20">
            <el-tag v-for="(link,index) in content.links" :key="index" type="success">
              {{link.entity1}}({{link.relation}}){{link.entity2}}
            </el-tag>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <div>
          <div v-if="!loading">暂无信息!</div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import {chartService} from '@/api';

  export default {
    data: function () {
      return {
        form: {
          content: '上周又有公司在调研中透底业绩预期,并放狠话称未来三年继续聚焦LED显示屏主业,坚决做到行业第一。这家公司就是艾比森。NUM月NUM日,南方基金、鹏华基金、平安资管等NUM多家机构造访艾比森。调研中,董事长丁彦辉重点介绍了公司业绩情况及未来发展思路。'

        },
        loading: false,
        content: {
          entities: [],
          links: []
        }
      };
    },
    mounted() {
      // this.getContent();
    },
    methods: {
      save() {
        this.loading = true;
        this.getContent();
      },
      getContent() {
        this.content.entities = [];
        this.content.links = [];
        chartService.getNlp(this.form.content).then(resData => {
          let entities = [];
          let links = [];
          let reArray = [];
          if (Array.isArray(resData)) {
            reArray = resData;
          } else {
            Object.keys(resData).forEach(item => {

              reArray.push(resData[item]);
            });
          }
          console.log(reArray);
          reArray.forEach(item => {
            if (entities.indexOf(item.entity1) === -1) {
              entities.push(item.entity1);
            }
            if (entities.indexOf(item.entity2) === -1) {
              entities.push(item.entity2);
            }
            if (item.relation) {
              links.push(item);
            }
            this.content = {
              entities,
              links
            };
          });
          this.loading = false;
        });

      }
    }
  };

</script>
